<template>
  <!-- 软食 -->
  <div id="SoftFood">
    <van-nav-bar title="膳食处方"></van-nav-bar>
    <div class="main">
      <div class="food" v-for="(val,index) in foodData" :key="val.id" @click="onChange(index)">
        <van-row class="minHeight" type="flex" align="center">
          <van-col span="4">
            <div class="num">{{ index+1 }}</div>
          </van-col>
          <van-col span="18" :offset="6">
            <div class="content">
              <div v-for="list in val.info" :key="list">{{ list }}</div>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="addFood">
        <van-form @submit="onSubmit" v-if="addFood">
          <div >
            <van-field
              v-model="message"
              rows="4"
              autosize
              label=""
              type="textarea"
              placeholder="请输入营养处方(多个食品以 英文‘;’分号隔开)"
            />
          </div>
          <div class="btn_box" style="display:flex;justify-content: space-around;align-items: center; ">
            <van-button round type="default" @click="cancel">取消</van-button>
            <van-button round  type="info" native-type="submit">确认</van-button>
          </div>
        </van-form>
        <van-button v-if="!addFood" round type="info" block @click="addFood=true">新增处方</van-button>
      </div>
    </div>
  </div>
</template>

<script>optionAdd
import { chufangoption } from "@/apis/record";
import { optionAdd } from "@/apis/record";
export default {
  data() {
    // pid=1
    return {

      addFood:false,
      item: "",
      foodData: [],
      message:''
    };
  },
  methods: {
    // pid = 2
    chufang() {
      chufangoption({ ty: 0, pid: 2 })
        .then((res) => {
          console.log(res.data);
          this.foodData = res.data.list;
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    },
    onChange(index) {
      console.log(index);
      let obj = JSON.parse(localStorage.getItem("form"));
      if (this.item === "breakfast") {
        obj.breakfast = index + 1 + "号套餐";
        obj.zc_index = index + 1;
        obj.zc_taocan_id = this.foodData[index].id;
        obj.zc_taocan_title = this.foodData[index].title;
        obj.zc_taocan_info = this.foodData[index].info;
        obj.zc_taocan_video = this.foodData[index].video;
        obj.zc_taocan_video_poster = this.foodData[index].img;

      }
      if (this.item === "lunch") {
        obj.lunch = index + 1 + "号套餐";
        obj.wc_index = index + 1;
        obj.wc_taocan_id = this.foodData[index].id;
        obj.wc_taocan_title = this.foodData[index].title;
        obj.wc_taocan_info = this.foodData[index].info;
        obj.wc_taocan_video = this.foodData[index].video;
        obj.wc_taocan_video_poster = this.foodData[index].img;
      }
      if (this.item === "dinner") {
        obj.dinner = index + 1 + "号套餐";
        obj.d_index = index + 1;
        obj.d_taocan_id = this.foodData[index].id;
        obj.d_taocan_title = this.foodData[index].title;
        obj.d_taocan_info = this.foodData[index].info;
        obj.d_taocan_video = this.foodData[index].video;
        obj.d_taocan_video_poster = this.foodData[index].img;
      }
      console.log(JSON.stringify(obj));
      localStorage.setItem("form", JSON.stringify(obj));
      this.$router.go(-1);
    },
    cancel() {
      this.addFood = false
      this.message = ''
    },
    onSubmit() {

      optionAdd({pid:2,ty:0,info:this.message})
      .then((res) => {
          let add = {id:'',info:'',title:'',video:'',img:'',nums:''}
          add.id = res.data.id
          add.info = this.message.split(/[\n\s+,；;]/g)
          this.foodData.push(add)
          this.cancel()
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    }
  },
  mounted() {
    this.chufang();
  },
  created() {
    this.item = this.$route.params.item;
    console.log(this.item);
  },
};
</script>

<style lang="less">
#SoftFood {
  text-align: left;
  .van-nav-bar {
    background-color: #f5f5f5;
  }
  .main {
    margin: 10px 10px;
  }
  .food {
    border-radius: 8px;
    margin: 10px 0;
    background-color: #fff;
    .van-row {
      position: relative;
    }
    .minHeight {
      min-height: 40px;
    }
    .van-col {
      &:first-child {
        position: absolute;
        background-color: #4589ed;
        height: 100%;
        font-size: 30px;
        color: #fff;
        border-bottom-left-radius: 8px;
        width: 25%;
      }
      .num {
        position: absolute;
        height: 42px;
        // width: 18px;
        left: 50%;
        top: 50%;
        margin-left: -9px;
        margin-top: -18px;
      }
      .content {
        padding: 9px 0 9px 9px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        div {
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .btn_box{
    margin: 10px 0;
    button{
      width: 30%;
    }
  }
}
</style>
